<template>
  <div class="dashboard-container">
    <div class="container container4">
      <issue-categories-chart ring="true" height="300px"></issue-categories-chart>
    </div>
    <div class="container container4">
      <kri-chart height="300px"></kri-chart>
    </div>
    <div class="container container5">
      <branches-issues-chart></branches-issues-chart>
    </div>
    <div class="container container5">
      <losses-chart></losses-chart>
    </div>
    <div class="container container5">
      <kri-chart2 height="300px"></kri-chart2>
    </div>
    <div class="container container5">
      <feedback-chart height="100px"></feedback-chart>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import BranchesIssuesChart from '../components/bar-line/BranchesIssuesChart.vue'
import IssueCategoriesChart from '../components/pie/IssueCategoriesChart.vue'
import KriChart from '../components/pie/KriChart.vue'
import KriChart2 from '../components/pie/KriChart2.vue'
import LossesChart from '../components/bar-line/LossesChart.vue'
import FeedbackChart from '../components/stackbar/FeedbackChart.vue'

@Component({
  name: 'CombinedCharts1',
  components: {
    KriChart,
    KriChart2,
    LossesChart,
    FeedbackChart,
    BranchesIssuesChart,
    IssueCategoriesChart
  }
})
export default class extends Vue {
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  .container {
    border: 1px solid #e3e3e3;
    margin-top: 1em;
  }

  .container4 {
    width: 400px;
  }

  .container5 {
    width: 500px;
  }

  .container6 {
    width: 600px;
  }

  .container7 {
    width: 700px;
  }
}

</style>
